<template>


  <!--添加操作-->
  <div style="margin-top: 30px;margin-left: 30px">


    <!--    -->
    <a-button style="margin-bottom: 20px" type="primary" @click="onclickShow">上传代码</a-button>
    <a-button style="margin-bottom: 20px" type="primary" @click="getList">刷新</a-button>
    <a-table
      :columns="columns"
      :data-source="list"
      :pagination="pagination"
    >
      <a slot="code" slot-scope="text,record,index ">{{ index + 1 }}</a>
      <a slot="category" slot-scope="text,record,index ">python</a>
      <a slot="name" slot-scope="text">{{ text }}</a>
      <template slot="status" slot-scope="text,record">
        <span v-if="record.filePath==''">
          <a-badge status="processing"/>
          <span>处理中</span>
         </span>
        <span v-if="record.filePath!==''">
          <a-badge status="success"/>
          <span>处理成功</span>
         </span>
      </template>


      <span slot="action" slot-scope="text, record">
         <a v-if="record.filePath!==''" style="color: #1890ff"
            :href="record.filePath">查看报告</a>
         <a v-if="record.filePath===''">查看报告</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
             <a style="color: #1890ff">删除</a>
          </a-popconfirm>
      </span>
    </a-table>


    <a-modal
      title="上传代码"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >

      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">

        <!--代码上传-->
        <!--      <a-form-model-->
        <!--        ref="ruleForm"-->
        <!--        :model="form"-->
        <!--        :rules="rules"-->
        <!--        :label-col="labelCol"-->
        <!--        :wrapper-col="wrapperCol"-->
        <!--      >-->

        <a-form-model-item label="标题" prop="name">
          <a-input v-model="form.name"/>
        </a-form-model-item>


        <a-form-model-item label="报告格式" prop="category">
          <a-select v-model="form.reportType" placeholder="请选择报告格式">
            <a-select-option value="html">
              html
            </a-select-option>
            <a-select-option value="text">
              text
            </a-select-option>
          </a-select>
        </a-form-model-item>


        <a-upload-dragger
          name="file"
          :multiple="true"
          :customRequest="customRequest"
          @change="handleChange"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox"/>
          </p>
          <p class="ant-upload-text">
            单击或拖动文件到此区域以上传
          </p>
          <p class="ant-upload-hint">
            只支持 python 语言
          </p>
        </a-upload-dragger>


      </a-form-model>

    </a-modal>

  </div>
</template>

<script>


import {
  saveReport,
  fetchList,
  uploadFile,
  deleteRole
} from '@/api/paper';



export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      list: [],
      pagination:{
        total:0,
        defaultCurrent: 1,  // 默认当前页数
        defaultPageSize: 10,   // 默认当前页显示数据的大小
        onChange: (current, size) => {
          this.getList({pageIndex:current,pageSize:10})
        } // 点击页码事件

      },
      fileList:[],
      labelCol: {span: 6},
      wrapperCol: {span: 14},
      form: {
        reportType: 'html',
        codePath: '',
        codeType: 'python',
        name: '111',
      },



      rules: {

      },


      columns: [
        {
          title: '编码',
          dataIndex: 'code',
          key: 'code',
          scopedSlots: {customRender: 'code'},
        },
        {
          title: 'id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '语言',
          dataIndex: 'category',
          key: 'category',
          // width: 80,
          scopedSlots: {customRender: 'category'},
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          // width: 150,
          scopedSlots: {customRender: 'status'},
        },
        {
          title: '文件名',
          dataIndex: 'reportName',
          key: 'reportName',
          scopedSlots: {customRender: 'reportName'},
        },
        // {
        //   title: '日期',
        //   dataIndex: 'date',
        //   key: 'date',
        // },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 160,
          scopedSlots: {customRender: 'action'},
        }

      ],



    }
  },

  created() {
    this.getList();
  },
  methods: {


    onClickShow() {


    },


    handleOk() {

     const {
       reportType,
       codePath,
       codeType,
       name,
     }=this.form


      const that=this;

      if(!reportType || !codePath || !codeType || !name){
        this.$message.error({
          content: '请填写完整内容',
        });
      }else{

        saveReport(that.form).then(response => {
          that.$message.success({
            content: '添加成功！',
            key: '1',
          });
          that.visible = false;
          that.getList();
        });

      }

    },



    getList(param) {
      this.listLoading = true;
      fetchList(param).then(response => {
        this.listLoading = false;
        this.list = response.data.records;
        this.pagination.total = response.data.total;
      });
    },
    customRequest(data){
      // this.uploading = false;
      const formData = new FormData();
      formData.append("file",data.file);
      uploadFile(formData).then(res => {
        let file = {
          url:res.data.minioUrl,
          name:res.data.name,
          status:'done',
          response:'{"status":"success"}'
        };
        this.form.codePath=res.data.minioUrl;
        console.log(this.form);
        this.$message.success('upload successfully.');
        return file;
      });
    },




    // handleDelete(index, row) {
    //   const that=this;
    //   deleteAdmin(row.id).then(response => {
    //     that.$message.success({
    //       content: '删除成功！',
    //       key: '1',
    //     });
    //     that.getList();
    //   });
    //
    // },




    handleChange(value) {
      const filename = value.file.minioUrl;
      value.file.status = 'done';
    },

    handleCancel() {
      this.visible = false;
    },

    onclickShow() {
      this.visible = true;
    },


    handleEdit(index, row) {
      console.log(index, row);
    },


    handleDelete(id) {
      // console.log(index, row);
      //


      deleteRole({id:id}).then(response => {
        this.$message.success({
          type: 'success',
          content: '删除成功!'
        });
        this.getList();
      });


    }

  }
}
</script>
